/**
 *
 * dom: 我们渲染在浏览器的每一个标签，本质上就是一个dom(节点)，这是一个名词，你可以等同他为我们写的标签
 * 那么我们为什么要进行dom操作
 * 举个例子
 * 加入，我想做一个切换背景色的需求，由于我们之前学的都是css都是写死了的，
 * 但是，我又不知道，用户点击切换背景色，我要怎么改变
 * css不能针对你的这个点击事件，自己去改css
 * 那么这时候就需要js来帮我们做了。
 * 这就是js的作用，脚本，何为脚本，就是解决属性或者硬性规定的，动态改变
 */
// 那么操作之前，我们得获取我们要操作的标签
// js获取标签的方法
// 跟css一样，根据id class 标签名
// 参数名，都是你写的那个，比如
// document.getElementById("content");
// document.getElementsByClassName();
// document.getElementsByTagName();
// // 当然还有一种，一把梭哈的方法, #属性名   对应id 属性 跟css一样
// document.querySelector("#id");

// 首先，我要等页面加载完才执行，不能还没显示页面，你就把他改了
// window.onload 这个方法，就是浏览器加载完页面，浏览器会执行你写的这个方法
window.onload = function () {
  console.log("浏览器加载完页面了");
  // ok 加载完页面 ，我们可以开始拿标签了
  changeColor();
  //    插图片
  insertImg();
};

function changeColor() {
  // ok 加载完页面 ，我们可以开始拿标签了
  // 拿到我们的div标签
  const divEle = document.getElementById("content");
  console.log(divEle);
  // 获取之后，我想把这个标签颜色放大，颜色变红，背景变绿，就是修改对应的属性,文字内容改为 hello world
  // 这个style就相当于css，你把对应的属性修改一下
  divEle.style.color = "red";
  divEle.style.fontSize = "24px";
  divEle.style.backgroundColor = "green";
  divEle.innerText = "hello world";
}
/**
 * 需求，我这个标签，我要让他添加一张图片在里面
 * @param {*} params
 */
function insertImg() {
  // 1. 获取我要的元素
  const divEle = document.getElementById("content");
  // 2. 创建一个图片标签
  const imgEle = document.createElement("img");
  // 3. 给这个图片标签属性,指定图片的地址
  imgEle.src =
    "https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/055483655a6d42f89166660a20c8f916~tplv-k3u1fbpfcp-no-mark:480:400:0:0.awebp?";
  //    4. 把这个图片插入到我这个div标签
  divEle.appendChild(imgEle);
}
